<template>
	<view class="">
		<!-- 招标信息 -->
		<view class="active-list">

			<!-- <view class="active-head">
				<view class="head-img">
					<img :src="userInfo.head" alt="">
				</view>
				<view class="active-name-info">
					<view class="active-name">
						{{userInfo.name}}
					</view>
					<view class="active-introduce">
						{{userInfo.position}}
					</view>
				</view>
			</view> -->
			<view class="active-title">
				<!-- <text>标题：</text> -->
				<!-- count="true" showWordLimit="true" -->
				<u--textarea   placeholder="请填写联系人姓名"  v-model="title" border="none" maxlength="4" count="true"></u--textarea>
			</view>
			<view class="active-title">
				<!-- <text>标题：</text> -->
				<u--input placeholder="请填写联系人联系方式" v-model="title" border="none" clearable maxlength="11"></u--input>
			</view>
			<view class="active-title active-time">
				<text>时间：</text>
				<text @click="startClick" class="start-time">{{startTime}}</text>
				<text>-</text>
				<text @click="endClick" class="end-time">{{endTime}}</text>
			</view>

			<view class="active-title active-select-address">
				<text>地址：</text>
				<pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion" class="address-pick">
					<text class="month-address">{{province}}</text>
					<text class="month-address">{{city}}</text>
					<text class="month-address">{{district}}</text>
					<img class="active-select-icon"
						src="https://file.casugn.com/storecompcard//9XyFV0MI1esRc6cf147e5a154628efec3f5fe0b5285d_1658388985397.png"
						alt="">
				</pick-regions>

			</view>

			<view class="active-title">
				<text>详细地址：</text>
				<u--input v-model="address" placeholder="请输入具体地址" border="none" clearable></u--input>
			</view>
			<view class="active-content">
				<text>内容：</text>
				<u--textarea v-model="content" class="active-content-content" border="none" placeholder="请输入活动内容">
				</u--textarea>
			</view>

			<view class="active-info">
				<view class="active-info-img">
					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="1" width="690" height="350">
						<!-- <img :src="item.infoImgUrl" alt=""> -->
					</u-upload>
					<!-- <img :src="item.infoImgUrl" alt=""> -->
					<!-- <view class="active-info-mask">
						<text>已报名 {{item.num}}</text>
					</view> -->
				</view>
			</view>

			<view class="sign-up">
				<u-button type="primary" shape="circle" color="#413BF3" text="提交活动" @click="submitActive(item,index)">
				</u-button>
			</view>

		</view>
		<u-datetime-picker :show="timeShow" v-model="startTimeValue" mode="datetime" @confirm="startTimeConfirm"
			@cancel="startTimeClose" closeOnClickOverlay :minDate="startTimeValue" @close="timeShow=false"></u-datetime-picker>
		<u-datetime-picker :show="endTimeShow" v-model="endTimeValue" :minDate="startTimeValue" mode="datetime" closeOnClickOverlay
			@close="endTimeShow=false" @confirm="endTimeConfirm" @cancel="endTimeClose"></u-datetime-picker>
		<!-- <u-select v-model="areaShow" mode="mutil-column-auto" :list="areaLists" @confirm="areaConfirm"></u-select> -->
	</view>
</template>

<script>
	import {
		areaLists
	} from '@/config/staticConfig.js'
	import baseConfig from '@/config/baseUrl.js'
	import pickRegions from '@/components/pick-regions/pick-regions.vue'
	export default {
		components: {
			pickRegions
		},
		data() {
			return {
				region: [],
				areaLists, //省市列表
				areaShow: true, //省市显示
				userInfo: {},
				title: '', //标题
				address: '', //地址
				content: '', //内容
				imageUrl: '', //图篇
				addressArea: '', //省市区
				province: '', //省
				city: '', //市
				district: '', //区
				startTime: "请选择开始时间",
				endTime: '请选择结束时间',
				fileList1: [],
				// 活动信息列表
				activeList: [

				],

				// 开始时间事件显示隐藏
				timeShow: false,
				startTimeValue: Number(new Date()),
				// 结束时间
				endTimeShow: false,
				endTimeValue: Number(new Date()),
			}
		},
		computed: {
			regionName() {
				// 转为字符串
				return this.region.map(item => item.name).join(' ')
			}
		},
		onShow() {
			this.userInfo = uni.getStorageSync('_userInfo')
			console.log(this.userInfo)
		},
		methods: {
			// 获取选择的地区
			handleGetRegion(region) {
				console.log(region)
				this.region = region
				this.addressArea = ''
				this.province = region[0].name //省
				this.city = region[1].name //市
				this.district = region[2].name //区
				this.addressArea = this.province + this.city + this.district
			},

			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				console.log(event.file[0])
				// this.imageUrl = event.file[0].url
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						// status: 'uploading',
						// message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				console.log(url)
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: baseConfig.uploadUrl + '/casugn-system/sys/common/upload',
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							let data = JSON.parse(res.data)
							console.log("测试一下上传视频")
							if (data.success) {
								this.imageUrl = data.message
								// this.videoUrl=data.message
								resolve(data.message)
							}
						}
					});
				})
			},

			areaConfirm(e) {
				console.log(e)
			},
			toAttendPerson() {
				uni.navigateTo({
					url: '/pagesBusiness/circleList/attendPerson'
				})
			},
			// 时间戳转yy-mm-dd hh-mm-ss
			shijianc(time) {
				var date = new Date(time)
				console.log("测试" + date)
				var Y = date.getFullYear() + '-'
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
				var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
				var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
				var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes())
				// + ':'
				var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
				return Y + M + D + h + m
			},
			// 开始时间选择
			startClick() {
				// console.log(new Date().getTime())
				// console.log(Number(new Date().getTime()))
				this.startTimeValue = Number(new Date().getTime())
				this.timeShow = true
			},
			// 开始时间时间确认
			startTimeConfirm(val) {
				let a = this.shijianc(val.value)
				this.startTime = a
				this.timeShow = false
				console.log(a)
			},
			// 开始时间取消选择
			startTimeClose() {
				this.timeShow = false
			},

			// 结束时间选择
			endClick() {
				// console.log(new Date().getTime())
				// console.log(Number(new Date().getTime()))
				this.endTimeValue = Number(new Date().getTime())
				this.endTimeShow = true
			},
			// 结束时间时间确认
			endTimeConfirm(val) {
				let a = this.shijianc(val.value)
				this.endTime = a
				this.endTimeShow = false
				console.log(a)
			},
			// 结束时间取消选择
			endTimeClose() {
				this.endTimeShow = false
			},
			// 提交活动
			submitActive(item, index) {
				if (this.title == "") {
					uni.showToast({
						title: "标题不能为空",
						icon: 'none'
					});
					return false
				}
				if (this.address == "") {
					uni.showToast({
						title: "详细地址不能为空",
						icon: 'none'
					});
					return false
				}
				if (this.startTime == "请选择开始时间") {
					uni.showToast({
						title: "请选择开始时间",
						icon: 'none'
					});
					return false
				}
				if (this.endTime == "请选择结束时间") {
					uni.showToast({
						title: "请选择结束时间",
						icon: 'none'
					});
					return false
				}
				if (this.imageUrl == "") {
					uni.showToast({
						title: "请选择封面照片",
						icon: 'none'
					});
					return false
				}
				if (this.content == "") {
					uni.showToast({
						title: "请输入活动内容",
						icon: 'none'
					});
					return false
				}
				if (this.addressArea == "") {
					uni.showToast({
						title: "请选择地址",
						icon: 'none'
					});
					return false
				}
				let openId = uni.getStorageSync('openId')
				console.log("这是openId", openId)
				let cardId = uni.getStorageSync('cardId')
				console.log("这是cardId", cardId)
				let data = {
					cardId: cardId,
					openId: openId.openid,
					title: this.title,
					address: this.address,
					startTime: this.startTime,
					endTime: this.endTime,
					image: this.imageUrl,
					content: this.content,
					province: this.province,
					city: this.city,
					district: this.district,
					sourceType: 1
				}

				this.$api.releaseActive(data).then(res => {
					console.log(res)
					// this.signSuccess=res.result
					if (res.success) {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
						setTimeout(() => {
							uni.navigateTo({
								url: '/pagesBusiness/circleList/circleList'
							})
						}, 1000)

					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.active-list {
		background: #FFFFFF;
		border-bottom: 1upx solid #EEEEEE;
		padding: 41upx 30upx 100upx;
		position: relative;

		.active-status {
			position: absolute;
			width: 140upx;
			height: 130upx;
			top: 38upx;
			right: 29upx;

			img {
				width: 140upx;
				height: 130upx;
			}
		}

		.active-head {
			padding: 37upx 0;
			display: flex;
			border-bottom: 1upx solid #EEEEEE;
			letter-spacing: 3upx;

			.head-img {
				width: 72upx;
				height: 72upx;
				border-radius: 50%;

				img {
					width: 72upx;
					height: 72upx;
					margin-top: 1upx;
				}
			}

			.active-name-info {
				margin-left: 21upx;

				.active-name {
					font-size: 30upx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #000000;
				}

				.active-introduce {
					margin-top: 19upx;
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #999999;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					width: 400upx;
				}
			}
		}

		.active-title {
			display: flex;
			// jus
			letter-spacing: 3upx;
			// margin-top: 30upx;
			font-size: 30upx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #666666;
			height: 110upx;
			// line-height: 110upx;
			border-bottom: 1upx solid #EEEEEE;

			.active-text {
				color: #000000;
			}
		}

		.active-time {

			.start-time,
			.end-time {
				font-size: 24upx;
				color: #000000;
			}
		}

		.active-content {
			display: flex;
			// line-height: 48upx;
			letter-spacing: 3upx;
			// margin-top: 30upx;
			font-size: 30upx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #666666;
			// height: 110upx;
			line-height: 50upx;
			padding: 37upx 0;
			border-bottom: 1upx solid #EEEEEE;

			::v-deep .u-textarea {
				padding: 5upx !important;
			}

			.active-text {
				color: #000000;
			}
		}

		.active-info {
			border-bottom: 1upx solid #EEEEEE;
			padding: 37upx 0;

			.active-info-img {
				margin: 0 auto;
				// margin-top: 30upx;
				width: 690upx;
				height: 350upx;
				border-radius: 30upx;
				position: relative;
				overflow: hidden;

				// border-bottom: 1upx solid #EEEEEE;
				img {
					width: 690upx;
					height: 350upx;
				}

				.active-info-mask {
					position: absolute;
					width: 690upx;
					height: 70upx;
					bottom: 0;
					background: linear-gradient(0deg, #000000 0%, rgba(0, 0, 0, 0.1000) 100%);
					line-height: 70upx;
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					text-align: center;
				}
			}
		}

		.active-select-address {
			display: flex;
			// justify-content: space-between;
			height: 110upx;
			line-height: 110upx;
			align-items: center;
			position: relative;

			.address-pick {
				width: 590upx;
				// background: red;
				font-size: 24upx;

				text {
					margin-left: 8upx;
				}
			}

			.active-select-icon {
				position: absolute;
				top: 50%;
				transform: translateY(-12upx);
				right: 10upx;
				width: 21upx;
				height: 24upx;
			}
		}

		.active-address {
			height: 110upx;
			line-height: 110upx;
			border-bottom: 1upx solid #EEEEEE;
			// margin-top: 30upx;
			letter-spacing: 3upx;
			display: flex;
			justify-content: space-between;
			align-items: flex-end;

			.active-title {
				border-bottom: none;

				.active-text {
					color: #413BF3;
				}

			}


		}

		.avatar {
			padding: 37upx;
			flex: 1;
			display: flex;
			justify-content: space-between;
			border-bottom: 1upx solid #EEEEEE;

			.avatar-img {
				img {
					width: 60upx;
					height: 60upx;
					margin: 0 -15upx;
				}
			}

			.avatar-num {
				font-size: 24upx;
				font-family: PingFang SC;
				line-height: 60upx;
				font-weight: 400;
				color: #413BF3;

				.avatar-num-right {
					margin-right: 10upx;
				}

			}

		}

		.sign-up {
			margin-top: 120upx;
		}

		::v-deep .u-upload__deletable {
			right: 20upx;
			top: 20upx;
			width: 20upx;
			height: 20upx;
			text-align: center;
			border-bottom-left-radius: 0;

			// background: transparent;
			.u-icon--right {
				text {
					font-size: 30upx !important;
					top: 7upx !important;
					left: 6upx !important;
				}
			}
		}
	}
</style>
